<template>
  <Card>
    <p slot="title">
      <Icon type="ios-heart"></Icon>
      我的主题
    </p>

    <div class="body">

      <div>
        <Button type="success" @click="createSubjectEvent">创建新主题</Button>
        <Tag style="margin-left: 30px" type="dot" color="blue">共计{{pageConfig.total}}个主题</Tag>
      </div>

      <Row :gutter="48" style="margin-top: 30px;">

        <Col :span="6" v-for="item in data" :key="item.id" style="margin-bottom: 20px;">
          <Card class="item">
            <img :src="item.mainimg">
            <div align="center">
              <h3>{{item.title}}</h3>
              <p>{{item.detail}}</p>
              <div style="margin-top: 10px;">
                <Tag style="float: left" color="#5cadff">文章数:{{item.articlecount}}</Tag>
                <Button type="success" size="small" @click="handleManage(item.id)">管理</Button>
                <Button type="error" size="small" @click="deleteSubject(item.id)">删除</Button>
              </div>
            </div>
          </Card>
        </Col>

      </Row>

      <div style="margin: 10px;overflow: hidden">
        <br/>
        <div align="center">
          <Page :page-size="pageConfig.size" :total="pageConfig.total" :current="pageConfig.currentPage"
                @on-change="changePage"></Page>
        </div>
      </div>

    </div>
  </Card>
</template>

<script>
  export default {
    name: "Subject",
    data() {
      return {
        data: [],
        pageConfig: {
          size: 6,
          total: 0,
          currentPage: 1
        }
      }
    },
    created() {
      this.request(1);
    },
    mounted() {
      this.$emit('selectMenu', '1-7');
    },
    methods: {
      createSubjectEvent() {
        this.$router.push({name: 'CreateSubject'})
      },
      handleManage(val) {
        this.$router.push({name: 'SubjectManage', params: {id: val}})
      },
      request(page) {
        this.data.length = 0;
        this.http.get('/get-subject', {
          isSplit: true,
          page: page,
          size: this.pageConfig.size
        }, data => {
          let list = data.records;
          this.pageConfig.total = data.total;
          this.pageConfig.currentPage = data.current;
          this.data = list;
        }, error => {
          this.$Message.error(error);
        })
      },
      changePage(page) {
        this.request(page)
      },
      deleteSubject(id) {
        this.http.get('/del-subject', {id}, su => {
          this.$Message.success("删除成功");
          this.request(1);
        }, error => {
          this.$Message.error(error);
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .body
    margin: 10px
    .item
      img
        width: 100%
</style>
